<script setup>
  import router from "../router/index.js";
  import {useRoute} from "vue-router";
  import courseApi from "../api/courseApi.js";
  import {ref} from "vue";
  import { ElRate, ElInput, ElButton, ElCard, ElAvatar } from 'element-plus';
  import reserveApi from "../api/reserve.js";

  const route = useRoute()
  let id = route.params.id
  let course = ref({})
  const comments = ref([])
  const newComment = ref({})
  loadCourse()
  loadComments()

  function loadCourse(){
    courseApi.getCourse(id).then(resp=>{
      if (resp.code===200){
        course.value=resp.data
        console.log(course.value)
      }
    })
  }

  function loadComments() {
    reserveApi.getComments(id).then(resp=>{
      if(resp.code===200){
        comments.value=resp.data
      }
    })
  }

  function submitComment() {
    newComment.value.courseId=id
    reserveApi.comment(newComment.value).then(resp=>{
      if (resp.code===200){
        alert("评价成功")
        loadCourse()
      }else {
        alert(resp.msg)
        loadCourse()
      }
    }).catch(()=>alert("请求异常"))
  }
</script>

<template>
    <p @click="router.back()">返回</p>
    <div>
        <el-descriptions title="课程信息" column="1">
          <el-descriptions-item label="课程名称">{{course.name}}</el-descriptions-item>
          <el-descriptions-item label="房间名称">{{course.roomName}}</el-descriptions-item>
          <el-descriptions-item label="时长">{{course.length}}</el-descriptions-item>
          <el-descriptions-item label="开课时间">{{course.time}}</el-descriptions-item>
          <el-descriptions-item label="图片">
            <el-image :src="course.photo"></el-image>
          </el-descriptions-item>
        </el-descriptions>
    </div>

    <!-- 评价组件 -->
    <div class="comment-section">
      <h3>课程评价</h3>

      <!-- 提交评价 -->
      <el-card class="comment-form">
        <div class="form-header">
          <span>我要评价</span>
        </div>
        <div class="form-content">
          <div class="rating">
            <span>评分：</span>
              <el-rate v-model="newComment.score" allow-half />
          </div>
          <div class="comment-input">
            <el-input
              v-model="newComment.comment"
              type="textarea"
              placeholder="请输入您的评价..."
              :rows="3"
            ></el-input>
          </div>
          <div class="submit-button">
            <el-button type="primary" @click="submitComment">提交评价</el-button>
          </div>
        </div>
      </el-card>

      <!-- 评价列表 -->
      <div class="comments-list">
        <el-card
          v-for="comment in comments"
          :key="comment.id"
          class="comment-item"
        >
<!--          v-if="comment.comment!==''&&comment.comment!==null && comment.score!==null"-->
          <div class="comment-header" >
<!--            <el-avatar :size="30">{{ comment.username.substring(0, 1) }}</el-avatar>-->
            <div class="comment-user">
              <span class="username">{{ comment.memberName }}</span>
              <el-rate
                :model-value="comment.score"
                disabled
                :max="5"
                size="small"
              ></el-rate>
            </div>
            <div class="comment-date">{{ comment.commentTime }}</div>
          </div>
          <div class="comment-content">
            {{ comment.comment }}
          </div>
        </el-card>
      </div>
    </div>
</template>

<style scoped>
p{
  margin-top: 60px;
}

.comment-section {
  margin-top: 20px;
}

.comment-section h3 {
  margin-bottom: 15px;
  font-weight: bold;
}

.comment-form {
  margin-bottom: 20px;
}

.form-header {
  font-weight: bold;
  margin-bottom: 15px;
}

.rating {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.rating span {
  margin-right: 10px;
}

.comment-input {
  margin-bottom: 15px;
}

.comment-item {
  margin-bottom: 15px;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-user {
  flex: 1;
  margin: 0 15px;
}

.username {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.comment-date {
  color: #999;
  font-size: 12px;
}

.comment-content {
  padding-left: 45px;
}
</style>